.header-box {
  position: fixed; //导航栏要保持在最上方
  top: 0px;
  z-index: 99;
  width: 100%;
  height: 50px;
  color: @text-color;
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: @nav-bg-color;
  .hander-readme{
    width: 30px;
    font-size: 16;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor:pointer;
    &:hover{
      font-size: 17px;
      transition: all 0.2s;
    }

  }

  .nav-tabs {
    font-size: 17px;
    display: flex;
    align-items: center;
    width:60%;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;

    .nav-tabs-item {
      opacity: .8;

      &.active {
        padding: 8px;
        border-radius: 20px;
        color: @border-active-color;
        background-color: @nav-active-bg-color;
        transition: all 0.15s ease-in-out;
        opacity: .9;
        box-shadow: 0px 0px 2px @shadow-color; //阴影效果
      }

      &:hover {
        padding: 8px;
        border-radius: 20px;
        color: @border-active-color;
        background-color: @nav-active-bg-color;
        transition: all 0.15s ease-in-out;
        opacity: .8;
      }
    }
  }

  .nav-search {
    input {
      width: 100%;
      /* normalize */
      background: none;
      outline: none;
      border: none;
      /* custom */
      color: @text-color;
      background-color: @bg-color;
      height: fit-content;
      font-size: 15px;
      padding: 10px;
      border-radius: 5px;

      &::placeholder {
        color: @input-placeholder-color
      }
    }

  }
}